import React, { useState, useEffect, useRef } from 'react'
import axios from 'axios'
import { useNavigate, Outlet, useLocation } from 'react-router-dom'
import { useThrottleFn } from 'ahooks';
import './private.css'
import { AntOutline } from 'antd-mobile-icons'
import { Badge, Space, Input, Button } from 'antd-mobile'
var ws = new WebSocket('ws://localhost:2333')
const List = (props) => {
    const navigater = useNavigate()
    const location = useLocation();
    const { state } = location;
    const [username, setUsername] = useState()
    const [id, setId] = useState()
    const [src, setSrc] = useState()
    const [users, setUsers] = useState(JSON.parse(localStorage.getItem('user')))
    const [val, setVal] = useState('')
    const [list, setList] = useState([])

    const shijian = () => {
        setUsername(state.item[0].username)
        setId(state.item[0]._id)
        setSrc(state.item[0].src)
    }
    const getList = () => {
        axios.get('http://localhost:3000/bjw_index/bjwlist').then((item) => {
            setList(item.data.lists)
        })
    }
    const liao = () => {
        ws.send(JSON.stringify({
            text: val,
            users: [users._id, id],
            sender: users._id,
            value: 0
        }))
    }
    ws.onopen = function () {
        console.log('WebSocket connection opened');
    }
    ws.onmessage = function (e) {
        getList()
    }
    useEffect(() => {
        shijian()
        getList()
    }, [location])
    return (
        <div className='private-liao'>
            <div className="order-title">
                <div className="t1" onClick={() => { window.history.back() }}><svg t="1730286914624" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16962" width="200" height="200"><path d="M622.927311 789.137615c-6.503881 0-13.007763-2.16796-18.066337-7.226535l-231.249118-231.249118c-10.117149-10.117149-15.898377-23.847565-15.898377-39.023289 0-14.45307 5.781228-28.183486 15.898377-39.023288l231.971771-231.971772c10.117149-10.117149 26.015526-10.117149 35.410022 0 10.117149 10.117149 10.117149 26.015526 0 35.410021l-231.249118 231.971772c-0.722653 0.722653-1.445307 2.16796-1.445307 2.890614 0 0.722653 0 2.16796 1.445307 2.890614l231.249118 231.249118c10.117149 10.117149 10.117149 26.015526 0 35.410021-5.058574 5.781228-11.562456 8.671842-18.066338 8.671842z" fill="#2c2c2c" p-id="16963"></path></svg></div>
                <div className="t2"><span>{username}</span></div>
                <div className="t3"></div>
            </div>
            <div className="private-list">
                {list.map((item, index) => {
                    console.log(id);
                    console.log( item.users);
                    if (users._id == item.sender) {
                        return <div key={item._id} className='private-trlink'><span className='private-span2'>{item.text}</span>
                            <img src={users.src}></img>
                        </div>

                    }
                    if (id == item.users[1] || id == item.users[0]) {
                        return <div key={item._id} className='private-falink'>
                            <img src={src}></img>
                            <span className='private-span1'>{item.text}</span>
                        </div>
                    }
                })}
                <Input
                    placeholder='请输入内容'
                    value={val}
                    onChange={val => {
                        setVal(val)
                    }}
                    className='private-input'
                />
                <Button block color='primary' size='large' onClick={() => { liao() }}>
                    发送
                </Button>
            </div>
        </div>

    )
}
export default List